<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		ul,li{
			list-style: none;
		}
		*{
			box-sizing: border-box;margin: 0;padding: 0;
		}
		.clear:after{content:"";display:block;visibility:hidden;height:0;font-size:0;clear:both}
		.am-top{
			width: 100%;height: 40px;border-bottom: 1px solid #aaa;padding-top: 14px;
		}
		.am-top ul li{
			min-width: 85px;height: 26px;padding: 0 5px;
			border: 1px solid #aaa;border-bottom: none;
			float: left;margin-left: 10px;
		}
		.am-top ul .active{
			background-color: #aaa;color: #fff;
		}
		.am-search{
			width: 100%;height: 42px;padding-top: 9px;
		}
		.am-search label{
			display: block;float: left;margin-left: 10px;
		}
		.am-search label input[type="text"]{
			display:block;width: 200px;height: 26px;border: 1px solid #aaa;
			text-indent: 10px;border-radius: 5px;
		}
		.am-search label .am-search-btn{
			display:block;width: 90px;height: 26px;line-height: 24px;
			border-radius: 5px;background-color: #fff;border: 1px solid #aaa;
		}
		.am-list{
			width: 100%;min-height: 240px;
		}
		.am-list table{
			width: 100%;border:1px solid #aaa;border-bottom: none;
		}
		.am-list tr{
			width: 100%;height: 32px;text-align: center;
		}
		.am-list tr th,td{
			font-weight: normal;border-bottom: 1px solid #aaa;
		}
		.am-list tr th:nth-child(1),.am-list tr td:nth-child(1){
			width: 25%;border-right:1px solid #aaa;
		}
		.am-list tr th:nth-child(2),.am-list tr td:nth-child(2){
			width: 50%;border-right:1px solid #aaa;
		}
		.am-list tr td:nth-child(2) p{
			max-width: 250px;
			overflow: hidden; /*自动隐藏文字*/
			text-overflow: ellipsis;/*文字隐藏后添加省略号*/
			white-space: nowrap;/*强制不换行*/
		}
		.am-list tr th:nth-child(3),.am-list tr td:nth-child(3){
			width: 25%;
		}
		.am-pages ul{
			margin: 10px auto;padding: 0 10px;
		}
		.am-pages ul li{
			float: left;height: 20px;line-height: 20px;font-size: 12px;padding: 0 8px;
		}
		.am-pages ul li a{
			color: #0a8ddf;text-decoration: none;
		}
		.am-pages ul li a:hover{
			text-decoration: underline;
		}
	</style>
</head>
<body>
<ul style="width: 500px">
	<li>
		<div class="am-top clear">
			<ul>
				<li class="active">普通机构</li>
				<li>投资促进机构</li>
				<li>联盟成员</li>
			</ul>
		</div>
		<div class="am-search clear">
				<label for="">
					<input type="text" placeholder="机构名称">
				</label>
				<label for="">
					<input type="submit" value="搜索" class="am-search-btn">
				</label>
		</div>
		<div class="am-list">
			<table  cellspacing="0" cellpadding="0">
				<tr>
					<th>选择</th>
					<th>机构名称</th>
					<th>添加时间</th>
				</tr>
				<tr>
					<td><label for=""><input type="radio"></label></td>
					<td><p>附件名称机构名称机构附件名称机构名称机构</p></td>
					<td>2017-07-12</td>
				</tr>
				<tr>
					<td><label for=""><input type="radio"></label></td>
					<td><p>附件名称</p></td>
					<td>2017-07-12</td>
				</tr>
				<tr>
					<td><label for=""><input type="radio"></label></td>
					<td><p>附件名称</p></td>
					<td>2017-07-12</td>
				</tr>
			</table>
		</div>
		<div class="am-pages">
			<ul class="clear">
				<li><a href="">首页</a></li>
				<li><a href="">上一页</a></li>
				<li>1</li>
				<li><a href="">下一页</a></li>
				<li><a href="">尾页</a></li>
				<li>
					跳转到
					<label for="">
						<select name="" id="">
							<option value="">1</option>
							<option value="">2</option>
							<option value="">3</option>
							<option value="">4</option>
							<option value="">5</option>
							<option value="">6</option>
							<option value="">7</option>
							<option value="">8</option>
							<option value="">9</option>
							<option value="">10</option>
							<option value="">11</option>
							<option value="">12</option>
							<option value="">13</option>
							<option value="">14</option>
							<option value="">15</option>
							<option value="">16</option>
							<option value="">17</option>
							<option value="">18</option>
							<option value="">19</option>
							<option value="">20</option>
						</select>
					</label>
				</li>
				<li>共有<span>20</span>条记录，当前<span>1/3</span></li>
			</ul>
		</div>
	</li>
</ul>	
</body>
</html>